// 获取学员成绩，并渲染
function getScore() {
    axios.get('/score/list').then(({ data: res }) => {
        let { code, data } = res
        if (code === 0) {
            let arr = []
            for (let key in data) {
                arr.push(`
                <tr>
                <th scope="row">${key}</th>
                <td>${data[key].name}</td>
                <td data-id=${key} data-batch=1 class="score">${data[key].score[0]}</td>
                <td data-id=${key} data-batch=2 class="score">${data[key].score[1]}</td>
                <td data-id=${key} data-batch=3 class="score">${data[key].score[2]}</td>
                <td data-id=${key} data-batch=4 class="score">${data[key].score[3]}</td>
                <td data-id=${key} data-batch=5 class="score">${data[key].score[4]}</td>
                </tr>
                `)
            }
            $('tbody').html(arr.join(''))
        }
    })
}
getScore()

$('tbody').on('click', '.score', function () {
    let td = $(this)
    // 判断一下，td中是否已经有input了，如果有就return
    if (td.children().length > 0) return;
    // 获取td中的分数
    let text = td.text()
    td.html('')
    // 创建input标签
    let input = $('<input />')
    // 添加input标签样式，让input标签和td样式一样
    input.css('width', '100%').css('height', '100%').css('border', 'none').css('outline', 'none').css('background-color', td.css('background-color'))
    // 将input标签文本和td文本内容一样
    input.val(text)
    // 将input标签插入到td标签里面
    input.appendTo(td)
    // 让input标签获取焦点
    input.focus()
    // 注册input标签失去焦点事件
    input.on('blur', function () {
        // 让td内容设置会以前内容
        td.html(text)
    })
    // 设置input标签的键盘按下事件
    input.on('keyup', function (e) {
        // 如果按下的是Enter回车键就执行下边代码
        if (e.keyCode === 13) {
            let score = $(this).val()
            if (isNaN(score) || score < 0 || score > 100) {
                return toastr.warning('请输入0~100之间数字');
            }
            let data = {
                stu_id: td.data('id'),
                batch: td.data('batch'),
                score: score
            }
            axios.post('/score/entry', data).then(({ data: res }) => {
                console.log(res);
                if (res.code === 0) {
                    toastr.success(res.message);
                    td.html(score)
                }
            })
        }
    })

})